<template>
  <div>
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <!-- <el-input v-model="qqq"></el-input> -->
    <r-table
      :isPagination="true"
      :isHandle="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      @refresh="init()"
    >
    </r-table>
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="140px"
      dialogWidth="600px"
      :isHandle="true"
    />
    <!-- 导入详情按钮的模板 -->
    <useDetailDialog
      :visible.sync="warehouse_gate_data.show"
      v-if="warehouse_gate_data.show"
      :deviceId="deviceId"
      v-on:warehouse_gate_dall="warehouse_gate_dall"
    ></useDetailDialog>
  </div>
</template>
<script>
import useDetailDialog from "./son/useDetailDialog.vue";
export default {
  components: {
    useDetailDialog,
  },
  data() {
    return {
      qqq: "",
      warehouse_gate_data: {
        show: false,
      },
      visible: false,
      deviceId: "",
      searchData: {
        cabinet_id: "",
      },
      searchForm: [
        {
          type: "input",
          prop: "cabinet_id",
          placeholder: "设备编号",
          width: 230,
        },
      ],
      searchHandle: [
        {
          label: "搜索",
          type: "success",
          icon: "el-icon-search",
          handle: (e) => this.init(),
        },
      ],
      tableData: [],
      tableCols: [
        {
          label: "设备编号",
          prop: "cabinet_id",
          width: 180,
        },
        {
          label: "ims卡号",
          prop: "imsi",
        },
        {
          label: "信号强度",
          prop: "gsm_signal",
          formatter: (e) => (e.gsm_signal ? e.gsm_signal + "%" : "--"),
        },
        {
          label: "功率",
          prop: "total_power",
          formatter: (e) => (e.total_power ? e.total_power + " kw/h" : "--"),
        },
        {
          label: "温度",
          prop: "cabinet_t",
          formatter: (e) => (e.cabinet_t ? e.cabinet_t + "℃" : "--"),
        },
        {
          label: "电流",
          prop: "total_i",
          formatter: (e) => (e.total_i ? e.total_i + "A" : "--"),
        },
        {
          label: "电压",
          prop: "total_v",
          formatter: (e) => (e.total_v ? e.total_v + "V" : "--"),
        },
        {
          label: "在线与否",
          prop: "offline",
          formatter: (e) =>
            e.offline == 1 ? "在线" : e.offline == 2 ? "离线" : "--",
          itemClass: (e) =>
            e.offline == 1 ? "success" : e.offline == 2 ? "danger" : "--",
        },
        {
          label: "版本号",
          prop: "softVersion",
        },
        // {
        //   label: "创建时间",
        //   prop: "update_time",
        // },
        {
          label: "操作",
          type: "button",
          width: 150,
          btnList: [
            {
              label: "详情",
              size: "mini",
              type: "success",
              handle: async (row) => {
                this.warehouse_gate_data.show = true;
                this.visible = true;
                this.deviceId = row.cabinet_id;
              },
            },
            {
              label: "升级",
              size: "mini",
              type: "primary",
              handle: async (row) => {
                this.formData.cabinet_id = row.cabinet_id;
                this.elFormVisible();
              },
            },
          ],
        },
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      formData: {
        cabinet_id: "",
        file_name: "",
      },
      formDatass: {
        cabinet_id: "",
        file_name: "",
      },
      formCols: [
        { type: "input", label: "文件名称", width: 350, prop: "file_name" },
      ],
      formRules: {
        file_name: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      formHandle: [
        {
          label: "取消",
          handle: (e) => this.elFormVisible(),
        },
        {
          label: "确定",
          type: "success",
          handle: (e) => this.elFormSubmit(),
        },
      ],
    };
  },

  created() {},
  mounted() {
    this.init();
  },

  methods: {
    async init() {
      let parm = {
        business: {
          cabinet_id: this.searchData.cabinet_id,
        },
        page_no: this.tablePage.page,
        page_size: this.tablePage.limit,
      };
      let res = await this.apis.get_cabinets(parm);
      if (res.code == 0) {
        this.tableData = res.result; //接收后端的数据
        this.tablePage.total = res.count || 0; //拿到总数
      } else {
        this.tableData = [];
      }
    },
    // 设备详情按钮
    warehouse_gate_dall(val) {
      this.warehouse_gate_data.show = val;
      this.visible = val;
    },
    // 升级--确认
    async elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.cabinet_updateFn(
            this.formData.cabinet_id,
            this.formData.file_name,
            0
          );
          this.formDatass.cabinet_id = this.formData.cabinet_id;
          this.formDatass.file_name = this.formData.file_name;
          this.elFormVisible();
        }
      });
    },
    // 封装升级请求
    async cabinet_updateFn(cabinet_id, file_name, confirm) {
      let res = await this.apis.cabinet_update({
        cabinet_id: cabinet_id,
        file_name: file_name,
        confirm: confirm,
      });
      if (res.code == 80007) {
        // 是否确认升级，返回code=80007时让用户确认
        this.$confirm("是否确认升级?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            this.cabinet_updateFn(
              this.formDatass.cabinet_id,
              this.formDatass.file_name,
              1
            );
          })
          .catch(() => {});
      } else {
        this.$message({
          type: res.code == 0 ? "success" : "error",
          message: res.msg,
        });
      }

      if (res) {
        this.init();
      }
    },
  },
};
</script>

<style lang="scss"></style>
